<template>
	<view class="bBtn_p_b140">
		<view class="contina w m_t_10">
			<view class="card">
				<u--form labelPosition="left" :model="form" labelWidth="120" ref="form1" borderBottom
					:labelStyle="labelStyle">
					<u-form-item label="项目名称" prop="form.project_id" borderBottom @click="showAction(1)">
						<u--input v-model="form.project.name" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择项目名称" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="支出类型" prop="form.type" borderBottom @click="showAction(2)">
						<u--input v-model="form.type" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择支出类型" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="支出金额(￥)" prop="form.fee" borderBottom>
						<u--input v-model="form.fee" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请输入支出金额" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="支出方式" prop="form.pay_type" borderBottom @click="showAction(3)">
						<u--input v-model="form.pay_type" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择支出方式" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="收款户名" prop="form.account_name" borderBottom>
						<u--input v-model="form.account_name" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请输入收款户名" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="收款账号" prop="form.account" borderBottom>
						<u--input v-model="form.account" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请输入收款账号" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="开户行" prop="form.open_bank" borderBottom>
						<u--input v-model="form.open_bank" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请输入开户行" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="支付日期" prop="form.date" borderBottom @click="show=true">
						<u--input v-model="form.date" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择支付日期" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="备注" prop="form.remark" borderBottom>
						<u--input v-model="form.remark" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请输入备注" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<flooterCom @click="toAdd">
			<template #btn>
				<view class="flex_a_c" style="justify-content: space-around;">
					<view class="cale btns" @click="back">取消</view>
					<view class="save btns" @click="submit">保存</view>
				</view>
			</template>
		</flooterCom>
		<u-datetime-picker :show="show" mode="date" v-model="datetime" @cancel="show=false"
			@confirm="show=false"></u-datetime-picker>
		<u-picker :show="show2" :columns="actions" @cancel="show2=false" @confirm="selectAction"
			keyName="name"></u-picker>
	</view>
</template>

<script>
	import flooterCom from "@/compoment/flooterCom.vue"
	export default {
		data() {
			return {
				labelStyle: {
					display: 'flex',
					justifyContent: 'spaceBetween'
				},
				edit: 0,
				show: false,
				show2: false,
				datetime: '',
				actionType: 1,
				dateType: 1,
				actions: [],
				op1: [],
				op2: [],
				op3: [],
				form: {
					project_id: '',
					type: '',
					pay_type: '',
					fee: '',
					account_name: '',
					account: '',
					open_bank: '',
					date: '',
					remark: '',
					project: {
						name: ''
					}
				},
			}
		},
		components: {
			flooterCom
		},
		onLoad(option) {
			this.edit = option.edit
			if (this.edit == 1) {
				this.getDetail(option.id)
			}
			uni.setNavigationBarTitle({
				title: this.edit == 1 ? '编辑投标' : '新增投标'
			})
		},
		created() {
			this.$api.homeApi.getProject().then(res => {
				this.op1 = res.list
			})
			this.$api.biddingExpenditureApi.types().then(res => {
				res.type.map((item) => {
					this.op2.push({
						name: item
					})
				})
				res.pay_type.map((item) => {
					this.op3.push({
						name: item
					})
				})
			})
		},
		watch: {
			datetime(n, o) {
				this.form.date = this.$dayjs(n ? n : o).format('YYYY-MM-DD');
				this.datetime = ''
			}
		},
		methods: {
			async getDetail(id) {
				this.form = await this.$api.biddingExpenditureApi.detail({
					id: id
				})
				this.show_status = this.form.status == 1 ? '已中标' : '未中标'
			},
			selectAction(e) {
				let v = e.value[0]
				if (this.actionType == 1) {
					this.form.project_id = v.id
					this.form.project.name = v.name
				}
				if (this.actionType == 2) {
					this.form.type = v.name
				}
				if (this.actionType == 3) {
					this.form.pay_type = v.name
				}
				this.show2 = false
			},
			showAction(type) {
				this.actionType = type
				this.actions = []
				if (type == 1) {
					this.actions.push(this.op1)
				}
				if (type == 2) {
					this.actions.push(this.op2)
				}
				if (type == 3) {
					this.actions.push(this.op3)
				}
				this.show2 = true
			},
			back() {
				uni.navigateBack()
			},
			async submit() {
				uni.showLoading({
					title: '保存中...',
					mask: true
				})
				try {
					if (this.edit == 1) {
						await this.$api.biddingExpenditureApi.update(this.form)
					} else {
						await this.$api.biddingExpenditureApi.add(this.form)
					}
					this.$fun.tipBack('保存成功')
				} catch (e) {
					//TODO handle the exception
				}
				uni.hideLoading()
			},
		}
	}
</script>

<style lang="scss">
	.contina {
		.card {
			margin-bottom: 20rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #000000;
			}

		}

		::v-deep .u-form-item__body {
			padding: 30rpx 0 !important;




			.par_upload {
				width: 100rpx;
				height: 100rpx;
				background-color: #F4F5F7;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				margin-left: auto;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		::v-deep .u-form-item__body__left__content__label {
			justify-content: space-between !important;
			width: 100%;
			font-size: 28rpx;
			font-weight: 400;
			color: #3D3D3D;
		}
	}

	.btns {
		width: 330rpx;
		height: 90rpx;
		border-radius: 10px 10px 10px 10px;
		line-height: 90rpx;
		text-align: center;
		border-radius: 10px 10px 10px 10px;
	}

	.cale {
		color: #FF0000;
		border: 1px solid #F07878;
	}

	.save {
		color: #fff;
		background-color: #0074FF;
	}
</style>